<nav class="navbar navbar-top navbar-expand navbar-dark bg-primary border-bottom">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Search form -->
            {% if 'page' in segment %}
                <form class="navbar-search navbar-search-light form-inline mr-sm-3"
                      id="navbar-search-main" action="/pages.html" method="get">
            {% elif 'images' in segment %}
                <form class="navbar-search navbar-search-light form-inline mr-sm-3"
                      id="navbar-search-main" action="/images.html" method="get">
            {% elif 'configs' in segment %}
                <form class="navbar-search navbar-search-light form-inline mr-sm-3"
                      id="navbar-search-main" action="/configs.html" method="get">
            {% elif 'friends' in segment %}
                <form class="navbar-search navbar-search-light form-inline mr-sm-3"
                      id="navbar-search-main" action="/friends.html" method="get">
            {% elif 'custom' in segment %}
                <form class="navbar-search navbar-search-light form-inline mr-sm-3"
                      id="navbar-search-main" action="/custom.html" method="get">
            {% elif 'talks' in segment %}
                <form class="navbar-search navbar-search-light form-inline mr-sm-3"
                      id="navbar-search-main" action="/talks.html" method="get">
            {% elif 'userscripts' in segment %}
                <form class="navbar-search navbar-search-light form-inline mr-sm-3"
                      id="navbar-search-main" action="/userscripts.html" method="get">
            {% elif 'advanced' in segment %}
                <form class="navbar-search navbar-search-light form-inline mr-sm-3"
                      id="navbar-search-main" action="/advanced.html" method="get">
            {% else %}
                <form class="navbar-search navbar-search-light form-inline mr-sm-3"
                      id="navbar-search-main" action="/posts.html" method="get">
            {% endif %}

            <div class="form-group mb-0">
                <div class="input-group input-group-alternative input-group-merge">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                    </div>
                    {% if 'page' in segment %}
                        <input class="form-control" placeholder="搜索页面..." type="text" name="s">
                    {% elif 'images' in segment %}
                        <input class="form-control" placeholder="搜索图片..." type="text" name="s">
                    {% elif 'configs' in segment %}
                        <input class="form-control" placeholder="搜索配置..." type="text" name="s">
                    {% elif 'friends' in segment %}
                        <input class="form-control" placeholder="搜索友链..." type="text" name="s">
                    {% elif 'custom' in segment %}
                        <input class="form-control" placeholder="搜索字段..." type="text" name="s">
                    {% elif 'talks' in segment %}
                        <input class="form-control" placeholder="搜索说说..." type="text" name="s">
                    {% elif 'userscripts' in segment %}
                        <input class="form-control" placeholder="搜索命令..." type="text" name="s">
                    {% elif 'advanced' in segment %}
                        <input class="form-control" placeholder="搜索高级..." type="text" name="s">
                    {% else %}
                        <input class="form-control" placeholder="搜索文章..." type="text" name="s">
                    {% endif %}
                </div>
            </div>
            <button type="button" class="close" data-action="search-close"
                    data-target="#navbar-search-main" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            </form>
            <!-- Navbar links -->
            <ul class="navbar-nav align-items-center  ml-md-auto ">
                <li class="nav-item d-xl-none">
                    <!-- Sidenav toggler -->
                    <div class="pr-3 sidenav-toggler sidenav-toggler-dark"
                         data-target="#sidenav-main" data-action="sidenav-pin">
                        <div class="sidenav-toggler-inner">
                            <i class="sidenav-toggler-line"></i>
                            <i class="sidenav-toggler-line"></i>
                            <i class="sidenav-toggler-line"></i>
                        </div>
                    </div>
                </li>
                <li class="nav-item d-sm-none">
                    <a class="nav-link" href="#" data-action="search-show"
                       data-target="#navbar-search-main">
                        <i class="fas fa-search"></i>
                    </a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link" href="#" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        <i class="ni ni-bell-55"></i>
                        <div id="msg-point" style=""></div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-xl  dropdown-menu-right  py-0
                    overflow-hidden" id="notification-board">
                        <div class="list-group list-group-flush">
                            <ul href="#!" class="list-group-item list-group-item-action">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <i class="fas fa-comment"></i>
                                    </div>
                                    <div class="col ml--2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h4 class="mb-0 text-sm">消息</h4>
                                            </div>
                                        </div>
                                        <p class="text-sm mb-0">正在获取消息中...</p>
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </div>
                </li>
                {% if request.user.is_staff %}
                <li class="nav-item">
                    <a class="nav-link" href="/settings.html">
                        <i class="ni ni-settings"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
            <ul class="navbar-nav align-items-center  ml-auto ml-md-0 ">
                <li class="nav-item dropdown">
                    <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        <div class="media align-items-center">
                            <div class="media-body  ml-2  d-lg-block">
                <span class="mb-0 text-sm  font-weight-bold">
                  {{ request.user.username }}
                </span>
                            </div>
                        </div>
                    </a>
                    <div class="dropdown-menu  dropdown-menu-right ">
                        <div class="dropdown-header noti-title">
                            <h6 class="text-overflow m-0">欢迎</h6>
                        </div>
                        {% if request.user.is_staff %}
                        <a href="/settings.html" class="dropdown-item">
                            <i class="ni ni-single-02"></i>
                            <span>设置</span>
                        </a>
                        {% endif %}
                        <a target="_blank" href="https://www.oplog.cn/qexo"
                           class="dropdown-item">
                            <i class="ni ni-support-16"></i>
                            <span>支持</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a href="{% url 'logout' %}" class="dropdown-item">
                            <i class="ni ni-user-run text-red"></i>
                            <span>注销</span>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>